<template>
  <div class="app-container">
    <!-- 字典列表 -->
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" style="margin-bottom: 10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>字典列表</span>
          </div>
          <div class="head-container">
            <div v-if="crud.props.searchToggle">
              <!-- 搜索 -->
              <el-input v-model="query.dictType" clearable size="small" placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />

              <rrOperation :crud="crud" />
            </div>
            <crudOperation :permission="permission" />
          </div>

          <!--表格渲染-->
          <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler" @current-change="handleCurrentChange">
            <!--多选框-->
            <el-table-column type="selection" width="55" />
            <!--展示字段-->
            <el-table-column v-if="columns.visible('dictName')" :show-overflow-tooltip="true" prop="dictName" label="名称" />
            <el-table-column v-if="columns.visible('dictType')" :show-overflow-tooltip="true" prop="dictType" label="类型" />
            <el-table-column label="操作" width="130px" align="center" fixed="right">
              <template slot-scope="scope">
                <udOperation :data="scope.row" :permission="permission" msg="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！" />
              </template>
            </el-table-column>
          </el-table>

          <!--分页组件-->
          <pagination />
        </el-card>
      </el-col>
      <!-- 字典详情列表 -->
      <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>字典详情</span>
            <el-button v-if="this.$refs.dictDetail && this.$refs.dictDetail.dictType" class="filter-item" size="mini" style="float: right;padding: 4px 10px" type="primary" icon="el-icon-plus" @click="this.$refs.dictDetail.crud.toAdd">新增</el-button>
          </div>
          <dictDetail ref="dictDetail" />
        </el-card>
      </el-col>
    </el-row>

    <!--表单组件-->
    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="580px">
      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
        <el-form-item label="字典名称" prop="name">
          <el-input v-model="form.dictName" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="字典类型">
          <el-input v-model="form.dictType" style="width: 370px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudDict from '@/api/system/config/dict/dict_type'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import dictDetail from './module/dictDetail'

// crud交由presenter持有
const defaultCrud = CRUD({ title: '字典', url: 'dict/type/list/page', crudMethod: { ...crudDict }, pkIdName: 'dictId' })
const defaultForm = { dictId: null, dictName: null, dictType: null }

export default {
  name: 'Dict',
  components: { rrOperation, crudOperation, udOperation, pagination, dictDetail },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    return {
      title: '字典',
      permission: {
        add: [],
        edit: [],
        del: []
      },
      rules: {
        dictName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        dictType: [{ required: true, message: '请输入类型', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 选中字典后，设置字典详情数据
    handleCurrentChange(val) {
      if (val) {
        this.$refs.dictDetail.dictType = val.dictType
        this.$refs.dictDetail.crud.toQuery()
      }
    }
  }
}
</script>

<style scoped>
</style>
